<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>zqLogo</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      width: 100%;
      height: 100vh;
    }

    .main-logo {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 600px;
    }

    .logo-animation-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 12%;

    }

    .logo-animation {
      pointer-events: none;
      overflow: visible;
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1000px;
      height: 240px;
      margin: -120px 0 0 -500px;
      transform: scale(.633333);
    }

    .anime-logo {
      overflow: visible;
      position: relative;
      display: flex;
      flex-direction: column;
      /* width: 1000px; */
      height: 120px;
    }

    .anime-logo-signs {
      overflow: visible;
      display: flex;
      align-items: flex-end;
      position: relative;
      width: 100%;
      height: 512px;
      margin-top: -352px;
    }

    .logo-letter {
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      height: 100%;
    }

    .bounced {
      transform-origin: 50% 100% 0px;
      transform: translateY(200px) scaleX(.55) scaleY(.8);
    }

    .logo-animation .bounce {
      overflow: visible;
      position: absolute;
      left: 0;
      bottom: 70px;
      /*stroke: red;*/
    }

    .logo-animation .dot {
      opacity: 0.001;
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
      width: 40px;
      height: 60px;
      background-image: url(dignitas.png);
      border-radius: 50%;
      border: #000000 solid 1px;
      background-repeat: round;
      margin: -20px 0 0 -20px;
      background-color: currentColor;
      transform: translate3d(0, 0, 0);
    }

    .logo-animation .logo-letter svg {
      overflow: visible;
      fill: none;
      fill-rule: evenodd;
    }

    .logo-animation .line {
      fill: none;
      fill-rule: evenodd;
      stroke-linecap: square;
      stroke-width: 40;
      stroke: currentColor;
    }

    .logo-animation .fill {
      opacity: .001;
      stroke: currentColor;
      stroke-width: 40px;
    }

    .logo-text {
      opacity: .001;
      margin-top: .25em;
      font-weight: 400;
      font-size: 11px;
      line-height: 1;
      letter-spacing: .125em;
      text-align: justify;
      word-break: keep-all;
    }

    .logo-text:after {
      content: "";
      display: inline-block;
      width: 100%;
      height: 0;
      font-size: 0;
      line-height: 0;
    }

    .preloading {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 999999;
      background-position: center center;
      background-repeat: no-repeat;
      background-color: #ffffff;
      display: block;
    }

    .animated-bg {
      background-image: linear-gradient(to right,
      #f6f7f8 0%,
      #edeef1 10%,
      #f6f7f8 20%,
      #f6f7f8 100%);
      background-size: 200% 100%;
      animation: bgPos 1s linear infinite;
    }

    @keyframes bgPos {
      0% {
        background-position: 50% 0;
      }

      100% {
        background-position: -150% 0;
      }
    }
  </style>
</head>
<body>
<div class="preloading"></div>
<div class="main-logo">
  <div class="logo-animation-wrapper">
    <div class="logo-animation">
      <div class="anime-logo">
        <div class="anime-logo-signs">
          <div class="logo-letter letter-h">
            <svg class="bounced" viewBox="0 0 200 240" width="200" height="240">
              <path id="svg_hoppinzq_h" class="line"
                    d="M75 0 L75 240 M75 100 L180 100 M180 0 L180 240" stroke-linecap="null"
                    stroke-linejoin="null" stroke-width="12" stroke="#000000" fill="none" />
            </svg>
          </div>
          <div class="logo-letter letter-o">
            <svg class="bounced" viewBox="0 0 180 240" width="180" height="240">
              <ellipse id="svg_hoppinzq_o" class="line" ry="100" rx="60" cy="100" cx="100"
                       stroke-linecap="null" stroke-linejoin="null" stroke-width="12" stroke="#000000"
                       fill="none" />
            </svg>
          </div>
          <div class="logo-letter letter-p">
            <svg class="bounced" viewBox="0 0 180 240" width="180" height="240">
              <path id="svg_hoppinzq_p1" class="line" d="M75 0 L 75 240 M 75 25 q 150 30 0 100"
                    stroke="black" stroke-width="10" fill="none" />
            </svg>
          </div>
          <div class="logo-letter letter-p">
            <svg class="bounced" viewBox="0 0 180 240" width="180" height="240">
              <path id="svg_hoppinzq_p2" class="line" d="M75 0 L 75 240 M 75 25 q 150 30 0 100"
                    stroke="black" stroke-width="10" fill="none" />
            </svg>
          </div>
          <div class="logo-letter letter-i">
            <svg class="bounced" viewBox="0 0 60 240" width="60" height="240">
              <path class="line" d="M30 20v200" data-d2="M30 100v120" />
            </svg>
          </div>
          <div class="logo-letter letter-m">
            <svg class="bounced" viewBox="0 0 340 240" width="340" height="240" fill="none"
                 fill-rule="evenodd">
              <path class="line"
                    d="M240,220 L240,60 C240,28.954305 231.344172,20 220.666667,20 C171.555556,20 254.832031,20 170,20 C85.1679688,20 168.444444,20 119.333333,20 C108.655828,20 100,28.954305 100,60 L100,220"
                    data-d2="M310,220 L310,60 C310,28.954305 301.344172,20 290.666667,20 C241.555556,20 254.832031,110 170,110 C85.1679688,110 98.4444444,20 49.3333333,20 C38.6558282,20 30,28.954305 30,60 L30,220"
                    data-d3="M310,220 L310,60 C310,28.954305 301.344172,20 290.666667,20 C241.555556,20 254.832031,20 170,20 C85.1679688,20 98.4444444,20 49.3333333,20 C38.6558282,20 30,28.954305 30,60 L30,220" />
            </svg>
          </div>

          <div class="logo-letter letter-z">
            <svg class="bounced" viewBox="0 0 200 240" width="340" height="240" fill="none"
                 fill-rule="evenodd">
              <g>
                <line id="svg_z_1" class="line" y2="32" x2="173" y1="34" x1="51"
                      stroke-width="5" stroke="#000000" fill="none">
                  <animate attributeName="stroke" values="#ec1c24;#fdbd10;#0066b2"
                           times="0;0.5;1" dur="1s" repeatCount="indefinite"
                           begin="-0.6666666666666666s"></animate>
                </line>
                <line id="svg_z_2" class="line" y2="33" x2="172" y1="204" x1="44"
                      stroke-width="5" stroke="#000000" fill="none">
                  <animate attributeName="stroke" values="#ec1c24;#fdbd10;#0066b2"
                           times="0;0.5;1" dur="1s" repeatCount="indefinite"
                           begin="-0.6666666666666666s"></animate>
                </line>
                <line id="svg_z_3" class="line" y2="203" x2="45" y1="199" x1="165"
                      stroke-width="5" stroke="#000000" fill="none">
                  <animate attributeName="stroke" values="#ec1c24;#fdbd10;#0066b2"
                           times="0;0.5;1" dur="1s" repeatCount="indefinite"
                           begin="-0.6666666666666666s"></animate>
                </line>
              </g>
            </svg>
          </div>
          <div class="logo-letter letter-q">
            <svg class="bounced" viewBox="0 0 200 240" width="200" height="240">
              <g>
                <ellipse class="line" stroke="#000000" ry="98.5" rx="72.5" id="svg_13"
                         cy="118.5" cx="88.5" stroke-width="5" fill="none" />
                <path class="line"
                      d="m108,164c1.77067,1.14133 2.27633,1.74063 2.82133,2.44267c0.28998,0.37354 1.1807,1.55582 1.776,2.35599c0.29467,0.39609 0.8703,1.17418 1.38833,1.94417c0.24816,0.36887 0.89072,1.42651 1.353,2.42117c0.28809,0.61986 0.5086,1.25307 1.14533,2.43466c0.32362,0.60056 0.87436,1.4375 1.34933,2.23466c0.41931,0.70375 0.85492,1.56586 1.26683,2.36667c0.41343,0.80377 0.75166,1.42627 1.38517,2.2c0.50948,0.62225 1.11567,1.20033 1.91467,2c0.59975,0.60025 1.2,1.20001 1.8,1.8c0.60001,0.60001 1.2,1.2 2.00017,2.00017c0.6105,0.6105 1.03644,1.03523 1.96651,1.96651c0.51633,0.517 1.05464,1.05238 1.57199,1.608c0.49849,0.53535 1.27109,1.55121 1.71967,2.16283c0.61575,0.83957 1.3629,1.08444 2.31635,1.34917c0.83618,0.23218 1.50601,0.47447 2.72533,0.88c0.4644,0.15446 1.4664,0.48782 1.99733,0.65866c1.09746,0.35312 1.65736,0.52753 2.22134,0.69067c1.65489,0.47874 2.19226,0.60313 3.224,0.84799c0.49432,0.11731 1.44221,0.31618 2.724,0.636c0.765,0.19087 1.46388,0.39192 2.42433,0.7c0.91148,0.29237 1.80899,0.60001 2.409,0.8c0.89999,0.3 1.79442,0.61937 2.72133,0.88933c0.64682,0.18839 1.34468,0.36296 2.52116,0.48917c0.85583,0.09181 1.73659,0.10718 2.595,0.117c1.16245,0.01331 1.80972,-0.03322 2.62083,0.02533c1.21396,0.08762 1.99403,0.33298 2.54167,0.47917c0.81554,0.21771 2.03709,0.46718 2.83833,0.4955c0.90845,0.03212 1.83345,-0.06912 2.66167,0.02533c0.9924,0.11317 1.54733,0.6566 2.42134,0.95384c0.88234,0.30008 1.82631,0.46106 2.57332,0.67267c0.85953,0.24348 1.70731,0.37326 2.76935,0.79533c0.60356,0.23987 1.22604,0.57986 2.18399,0.98933c0.98763,0.42215 1.81842,0.5546 2.536,0.85466c0.71857,0.30048 1.521,1.0159 1.99518,1.71333c0.55252,0.81267 1.04259,1.45869 1.7195,2.2c0.53362,0.58438 0.79292,1.41779 1.22667,2.2c0.45479,0.82014 0.57466,1.70001 0.57466,2.60001c0,0.8 0,1.71466 0,2.61067l0,0.95332"
                      id="svg_14" stroke-linecap="null" stroke-linejoin="null"
                      stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" />
              </g>
            </svg>
          </div>
          <div class="bounce">
            <svg viewBox="0 0 1000 260" width="1000" height="260" fill="none">
              <path
                      d="M630,240 C630,111.154418 608.971354,40 530.160048,40 C451.348741,40 430,127.460266 430,210" />
            </svg>
            <div class="dot"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="main-logo-circle" style="margin-top: 25px;">
    <div style="display: flex;flex-direction: row-reverse;">
      <h3>By HOPPIN™ © Copyright</h3>
    </div>
  </div>
  <div class="description-title animated-bg">
    <h1>页面加载中，请稍后！</h1>
    <a onclick="logoAnimation.play()">重新加载</a>
    <a href="https://gitee.com/hoppin/hoppinzq-logo">源代码</a>
  </div>
</div>
</body>
<script src="https://hoppinzq.com/video/assets/js/jquery-3.3.1.min.js"></script>
<script src="https://hoppinzq.com/zui/static/js/anime.min.js"></script>

<script>
  $(function() {
    $(".preloading").toggle(500);
  })

  function fitElementToParent(el, padding, exception) {
    var timeout = null;

    function resize() {
      if (timeout) clearTimeout(timeout);
      anime.set(el, {
        scale: 1
      });
      if (exception) anime.set(exception, {
        scale: 1
      });
      var pad = padding || 0;
      var parentEl = el.parentNode;
      var elOffsetWidth = el.offsetWidth - pad;
      var parentOffsetWidth = parentEl.offsetWidth;
      var ratio = parentOffsetWidth / elOffsetWidth;
      var invertedRatio = elOffsetWidth / parentOffsetWidth;
      timeout = setTimeout(function() {
        anime.set(el, {
          scale: ratio
        });
        if (exception) anime.set(exception, {
          scale: invertedRatio
        });
      }, 10);
    }
    resize();
    window.addEventListener('resize', resize);
  }

  var logoAnimation = (function() {

    var logoAnimationEl = document.querySelector('.logo-animation');
    var bouncePath = anime.path('.bounce path');

    fitElementToParent(logoAnimationEl, 0, '.bounce svg');

    anime.set(['.letter-h', '.letter-o', '.letter-p', '.letter-i'], {
      translateX: 70
    });
    anime.set(['.letter-z', '.letter-q'], {
      translateX: -70
    });
    anime.set('.dot', {
      translateX: 960,
      translateY: -200
    });
    var logoAnimationTL = anime.timeline({
      autoplay: false,
      easing: 'easeOutSine'
    })
            .add({
              targets: '.letter-i .line',
              duration: 0,
              begin: function(a) {
                a.animatables[0].target.removeAttribute('stroke-dasharray');
              }
            }, 0)
            .add({
              targets: '.bounced',
              transformOrigin: ['50% 100% 0px', '50% 100% 0px'],
              translateY: [{
                value: [150, -160],
                duration: 190,
                endDelay: 20,
                easing: 'cubicBezier(0.225, 1, 0.915, 0.980)'
              },
                {
                  value: 4,
                  duration: 120,
                  easing: 'easeInQuad'
                },
                {
                  value: 0,
                  duration: 120,
                  easing: 'easeOutQuad'
                }
              ],
              scaleX: [{
                value: [.25, .85],
                duration: 190,
                easing: 'easeOutQuad'
              },
                {
                  value: 1.08,
                  duration: 120,
                  delay: 85,
                  easing: 'easeInOutSine'
                },
                {
                  value: 1,
                  duration: 260,
                  delay: 25,
                  easing: 'easeOutQuad'
                }
              ],
              scaleY: [{
                value: [.3, .8],
                duration: 120,
                easing: 'easeOutSine'
              },
                {
                  value: .35,
                  duration: 120,
                  delay: 180,
                  easing: 'easeInOutSine'
                },
                {
                  value: .57,
                  duration: 180,
                  delay: 25,
                  easing: 'easeOutQuad'
                },
                {
                  value: .5,
                  duration: 190,
                  delay: 15,
                  easing: 'easeOutQuad'
                }
              ],
              delay: anime.stagger(80)
            }, 1000)
            .add({
              targets: '.dot',
              opacity: {
                value: 1,
                duration: 100
              },
              translateY: 250,
              scaleY: [4, .7],
              scaleX: {
                value: 1.3,
                delay: 100,
                duration: 200
              },
              duration: 280,
              easing: 'cubicBezier(0.350, 0.560, 0.305, 1)'
            }, '-=290')
            .add({
              targets: '.letter-m .line',
              easing: 'easeOutElastic(1, .8)',
              duration: 600,
              d: function(el) {
                return el.dataset.d2
              },
              begin: function(a) {
                a.animatables[0].target.removeAttribute('stroke-dasharray');
              }
            }, '-=140')
            .add({
              targets: ['.letter-h', '.letter-o', '.letter-p', '.letter-i'],
              translateX: 0,
              easing: 'easeOutElastic(1, .6)',
              duration: 800,
              delay: anime.stagger(40, {
                from: 2.5
              }),
              change: function(a) {
                a.animatables[2].target.removeAttribute('stroke-dasharray');
              }
            }, '-=600')
            .add({
              targets: '.letter-m .line',
              d: function(el) {
                return el.dataset.d3
              },
              easing: 'spring(.2, 200, 3, 60)',
            }, '-=680')
            .add({
              targets: '.dot',
              translateX: 760,
              translateY: bouncePath('y'),
              rotate: {
                value: '1turn',
                duration: 790
              },
              scaleX: {
                value: 1,
                duration: 50,
                easing: 'easeOutSine'
              },
              scaleY: [{
                value: [1, 1.5],
                duration: 50,
                easing: 'easeInSine'
              },
                {
                  value: 1,
                  duration: 50,
                  easing: 'easeOutExpo'
                }
              ],
              easing: 'cubicBezier(0, .74, 1, .255)',
              duration: 800
            }, '-=1273')
            .add({
              targets: '.dot',
              scale: 1,
              rotate: '1turn',
              scaleY: {
                value: .5,
                delay: 0,
                duration: 150,
                delay: 230
              },
              translateY: [{
                value: 244,
                duration: 100
              },
                {
                  value: 204,
                  duration: 200,
                  delay: 130
                },
                {
                  value: 224,
                  duration: 225,
                  easing: 'easeOutQuad',
                  delay: 25
                }
              ],
              duration: 200,
              easing: 'easeOutSine'
            }, '-=474')
            .add({
              targets: '.letter-i .line',
              transformOrigin: ['50% 100% 0', '50% 100% 0'],
              d: function(el) {
                return el.dataset.d2
              },
              easing: 'cubicBezier(0.400, 0.530, 0.070, 1)',
              duration: 80
            }, '-=670')
            .add({
              targets: '.logo-letter',
              translateY: [{
                value: 40,
                duration: 150,
                easing: 'easeOutQuart'
              },
                {
                  value: 0,
                  duration: 800,
                  easing: 'easeOutElastic(1, .5)'
                }
              ],
              strokeDashoffset: [anime.setDashoffset, 0],
              delay: anime.stagger(60, {
                from: 'center'
              })
            }, '-=670')
            .add({
              targets: '.bounced',
              scaleY: [{
                value: .4,
                duration: 150,
                easing: 'easeOutQuart'
              },
                {
                  value: .5,
                  duration: 800,
                  easing: 'easeOutElastic(1, .5)'
                }
              ],
              delay: anime.stagger(60, {
                from: 'center'
              })
            }, '-=1090')
    return logoAnimationTL;

  })();
  var logoAnimationAll = Object.assign(logoAnimation).add({
    targets: '.main-logo-circle',
    opacity: {
      value: [0.001, 1],
      duration: 1500
    },
    translateY: {
      value: ['60px', 0],
      easing: 'cubicBezier(0.175, 0.865, 0.245, 0.840)'
    },
    duration: 2000,
    easing: 'easeInOutQuad'
  }, '-=970')
          .add({
            targets: ['.description-title', '.description-paragraph'],
            opacity: {
              value: [0.001, 1],
              duration: 1500
            },
            backgroundImage: [
              'linear-gradient(-135deg, #FFFFFF 50%, #F6F4F2 75%, #F6F4F2 100%, #DDDAD7 100%)',
              'linear-gradient(-135deg, #FFFFFF 5%, #F6F4F2 40%, #F6F4F2 70%, #DDDAD7 100%)'
            ],
            translateY: {
              value: ['80px', 0],
              easing: 'cubicBezier(0.175, 0.865, 0.245, 0.840)'
            },
            duration: 3500,
            delay: anime.stagger(75)
          }, '-=1300');
  logoAnimationAll.play()
</script>
</html>
